<template>
	<div>
		<DetailPage v-bind="ExtendFormConfig" :model="ExtendMod" style="width: 100%; margin: 0 auto">
			<template v-slot:dp_service_object_material="{ row }">
        <MenuList  :columns="row.column" :data="rowData.dpServiceObjectMaterials" icon="idCard"></MenuList>
			</template>
			<template v-slot:dp_service_object_contact="{ row }">
        <MenuList  :columns="row.column" :data="contactData" icon="phone"></MenuList>
			</template>
		</DetailPage>
	</div>
</template>

<script setup lang="ts">
import { getAreaObj } from '@/utils/util'
import DetailPage from '@/views/aplid/DetailPage/index.vue'
import MenuList from '@/views/aplid/DetailPage/MenuList/index.vue'
import { ExtendFormConfig } from '../../config'

const rowData: any = inject('nowRowData')
let ExtendMod = rowData.value?.dpServiceObjectExtends
const contactData = computed({
	get: () => {
		return rowData.value.dpServiceObjectContacts
			? rowData.value.dpServiceObjectContacts.map((item) => {
					return {
						...item,
						contact_areas_name: getAreaObj(item, 'contact'),
					}
			  })
			: []
	},
	set: (val) => {},
})


</script>

<style scoped></style>
